<template>
	<view class="container">
		<view class="" style="padding-top:30rpx;">
				
			<view class="tui-pro-item" :class="[isList ? 'tui-flex-list' : '']" hover-class="hover" :hover-start-time="150" @tap="detail(item)">
				<image :src="item.thumbnail" class="tui-pro-img" :class="[isList ? 'tui-proimg-list' : '']" mode="widthFix"  style="width: 260rpx;height: 260rpx;border-radius: 30rpx;"/>
				<view class="tui-pro-content" style="background-image:url('/static/images/lv/jishu.png');background-size: 40% 50%;background-repeat: no-repeat;background-position: 100% 100%;">
					<view class="tui-pro-tit">{{ item.title }}</view>
					<view>
						<block v-for="(item2, index2) in item.labels" :key="index2" >
							<tui-icon  name="member" :size='14' color="#f4cccc"></tui-icon><text style="padding-right:10rpx;font-size: 24rpx;">{{item2}}</text>
						</block>
					</view>
					<view>
						<view class="tui-pro-price">
							<tui-icon  name="clock" :size='14' ></tui-icon><text class="tui-factory-price">{{ item.activitytimestr }}</text>
							<tui-icon  name="people" :size='14'  style="padding-left:20rpx"></tui-icon><text class="tui-factory-price">已报名: {{ item.num }}人</text>
						</view>
						<view class="tui-pro-price">
							<text class="tui-sale-price">￥{{ item.price }}</text>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="tui-box">
			<tui-list-cell :arrow="true" :last="true" :radius="true" @click="chooseAddr">
				<view class="tui-address">
					<view v-if="address">
						<view class="tui-userinfo">
							<text class="tui-name">{{address.consignee}}</text> {{address.mobile}}
						</view>
						<view class="tui-addr">
							<text>{{address.province_name}}{{address.city_name}}{{address.district_name}}{{address.address}}</text>
						</view>
					</view>
					<view class="tui-none-addr" v-else>
						<image src="/static/images/index/map.png" class="tui-addr-img" mode="widthFix"></image>
						<text>选择收货地址</text>
					</view>
				</view>
				<view class="tui-bg-img"></view>
			</tui-list-cell>
			<view class="my-2 font-sm p-2 bg-white text-muted">
				<view>长治市潞州区内的可以下单并支持配送和上门自取 </view>
				<view>长治市潞州区以外的区域不支持配送可以上门自取 </view>
				<view>长治市以外的区域不支持下单</view>
			</view>
			<picker mode="selector"  :range="way" @change="changeWay">
				<view class="flex justify-between p-2 bg-white font">
					<text>收货方式</text>
					<view class="">
						{{way[wayIndex]}} >
					</view>
				</view>
			</picker>
			<view class="tui-top tui-goods-info">
				<tui-list-cell :hover="false" :lineLeft="false">
					<view class="tui-goods-title">
						商品信息
					</view>
				</tui-list-cell>
				<block v-for="(item,index) in items" :key="index">
					<tui-list-cell :hover="false" padding="0">
						<view class="tui-goods-item">
							<image :src="item.goods_thumbnail" class="tui-goods-img"></image>
							<view class="tui-goods-center">
								<view class="tui-goods-name">{{item.goods_name}}</view>
								<view class="tui-goods-attr">{{item.goods_spec}}</view>
							</view>
							<view class="tui-price-right">
								<view>￥{{item.goods_price}}</view>
								<view>x{{item.goods_quantity}}</view>
							</view>
						</view>
					</tui-list-cell>
				</block>
				<tui-list-cell :hover="false">
					<view class="tui-padding tui-flex">
						<view>配送费</view>
						<view>￥0.00</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :lineLeft="false" padding="0">
					<view class="tui-remark-box tui-padding tui-flex">
						<view>订单备注</view>
						<input type="text" class="tui-remark" v-model="note" placeholder="选填: 请先和商家协商一致" placeholder-class="tui-phcolor"></input>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :last="true">
					<view class="tui-padding tui-flex tui-total-flex">
						<view class="tui-flex-end tui-color-red">
							<view class="tui-black">合计： </view>
							<view class="tui-size-26">￥</view>
							<view class="tui-price-large">{{total_price}}</view>
						</view>
					</view>
				</tui-list-cell>
			</view>
			<view class="flex justify-between p-2 bg-white font">
				<text>优惠券</text>
				<view v-if="couponList.length > 0" class="text-danger" @tap="showModal">
					{{coupon}} <tui-icon name="arrowright" :size="28"></tui-icon>
				</view>
				<view class="" v-else>
					暂无可使用优惠券
				</view>
			</view>
		</view>
		<!--底部抽屉-->
		<tui-bottom-popup :show="bottomPopup" :radius="false" @close="hideModal">
			<view class="region-box p-2">
				<view class="coupon flex justify-between align-center mb-1" v-for="(item,index) in couponList" :key="index">
					<view>{{item.coupon_name}}<text class="text-danger">面值：[{{item.value}}]</text></view>
					<text class="bg-danger text-white py-1 px-2" @tap="selectCoupon(index)">选择</text>
				</view>
			</view>
		</tui-bottom-popup>
		<view class="tui-safe-area"></view>
		<view class="tui-tabbar">
			<view class="tui-flex-end tui-color-red tui-pr-20">
				<view class="tui-black">实付金额: </view>
				<view class="tui-size-26">￥</view>
				<view class="tui-price-large">{{getTotalPrice}}</view>
			</view>
			
			<view class="tui-pr25">
				<tui-button width="200rpx" :disabled="userinfo.balance - getTotalPrice < 0" height="70rpx" :type="userinfo.balance - getTotalPrice < 0 ? 'gray' : 'warning'" shape="circle" @click="investPay">余额支付</tui-button>
			</view>
			<view class="tui-pr25">
				<tui-button width="200rpx" height="70rpx" type="danger" shape="circle" @click="btnPay">微信支付</tui-button>
			</view>
		</view>

	</view>
</template>

<script>
	var api = require('@/common/api.js')
	import tuiButton from "@/components/extend/button/button"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiBottomPopup from "@/components/bottom-popup/bottom-popup"
	import tuiIcon from "@/components/icon/icon"
	export default {
		components: {
			tuiButton,
			tuiListCell,
			tuiBottomPopup,
			tuiIcon
		},
		data() {
			return {
				userinfo:'',
				hasCoupon: true,
				insufficient: false,
				address:'',
				items:'',
				sku:'',
				sku_id:'',
				value:1,
				total_price:0,
				query:'',
				note:'', //订单备注
				type:'',
				way:['配送','自取'],
				wayIndex:0,
				couponList:[],
				coupon:"请选择优惠券",
				couponIndex:-1,
				//底部弹框
				bottomPopup: false,
				money:0,//余额抵扣
			}
		},
		onLoad(options) {
			
			// if(this.tui.isLogin()){
			// 	this.userinfo = uni.getStorageSync("user")
			// }else{
			// 	uni.showToast({
			// 		title:"您没有登陆，请先登录",
			// 		icon:"none"
			// 	})
			// 	setTimeout(function(){
			// 		uni.navigateTo({
			// 			url:"/pages/mall-extend/my/my"
			// 		})
			// 	},1000)
			// }

			let info = JSON.parse(options.query);
			console.log(info);
			// this.type = options.type
			// this.query = options.query
			// this.total_price = info.total_price
			// this.items = info.items
			
			// this.getDefaultAddress()
			// this.getCoupon();
		},
		computed:{
			getTotalPrice:function(){
				let price = parseFloat(this.total_price);
				let coupon = this.couponIndex == -1 ? 0 : parseFloat(this.couponList[this.couponIndex].value);
				return (price-coupon-parseFloat(this.money)).toFixed(2);
			}
		},
		methods: {
			getAddress:function(id){
				api.get({
					url:'order/address/'+id,
					success: res => {
						if(res.code == 1)
							this.address = res.data
					}
				})
			},
			showModal: function() {
				this.bottomPopup = true;
			},
			hideModal: function() {
				this.bottomPopup = false;
			},
			selectCoupon:function(index){
				this.couponIndex = index;
				this.coupon = this.couponList[index].coupon_name;
				this.hideModal()
			},
			getCoupon:function(){
				api.get({
					url:"coupon/coupon",
					data:{
						price:this.total_price
					},
					success:res=>{
						console.log('优惠券',res.data);
						if(res.code == 1){
							this.couponList = res.data;
						}
					}
				})
			},
			changeWay:function(e){
				this.wayIndex = e.detail.value
			},
			
			//余额支付
			investPay(){
				let that = this;


				let data = {
					user_id:that.userinfo.id,
					address_id:that.address.id,
					note:that.note,
					type:that.type,
					total_price:that.getTotalPrice,
					coupon_id:that.couponIndex == -1 ? 0 : that.couponList[that.couponIndex].id,
					items:that.items,
					send_way:that.way[that.wayIndex]
				};
				console.log('提交的数据',data)
				api.post({
					url:"pay/balancepay",
					data:{
						goods:encodeURIComponent(JSON.stringify(data))
					},
					success:res=>{
						console.log('余额支付结果',res);
						if(res.code == 1){
							that.userinfo.balance = (that.userinfo.balance - that.getTotalPrice).toFixed(2);
							uni.setStorageSync('user',that.userinfo);
							uni.navigateTo({
								url:'/pages/mall-extend/success/success'
							})
							
						}else{
							uni.showToast({
								title:res.msg
							})
						}
					}
				})
				
			},
			btnPay() {
				let that = this;
				//判断在不在长治市
				if(that.address.city_name != "长治市"){
					uni.showToast({
						title:"当前地区不支持下单",
						icon:"none"
					})
					return;
				}
				//判断在不在潞州区
				if(that.address.district_name != "潞州区" &&　that.wayIndex == 0){
					uni.showToast({
						title:"当前地区不支持配送，可选择自取",
						icon:"none"
					})
					return;
				}
				//这里是做微信的支付，哈哈哈啊哈哈哈
				uni.login({
				  provider: 'weixin',
				  success: function (res) {
					if(res.code){
						api.post({
							url:'pay/wxpay',
							data:{
								code:res.code,
								goods:encodeURIComponent(JSON.stringify({
									user_id:that.userinfo.id,
									items:that.items,
									address_id:that.address.id,
									note:that.note,
									type:that.type,
									coupon_id:that.couponIndex == -1 ? 0 : that.couponList[that.couponIndex].id,
									total_price:that.total_price,
									send_way:that.way[that.wayIndex]
								}))
							},
							success:(res)=>{
								console.log('支付返回的数据',res);
								var info = res.data;
								//调用微信支付api
								 uni.requestPayment({
									 provider: 'wxpay',
									 timeStamp: info.timeStamp,
									 nonceStr: info.nonceStr,
									 package: info.package,
									 signType: info.signType,
									 paySign: info.paySign, //签名，这个要提前获取一下
									 success: function (res) {
									 	//跳转到支付成功的订单页面
										uni.navigateTo({
											url:'/pages/mall-extend/success/success'
										})
									 },
									 fail: function (err) {
										 uni.showToast({
											 title:'支付失败',
											 icon:'none'
										 })
									 }
								 }) 
							}
						})
					}
				  },
				  fail:function(res){
					  console.log(res);
				  }
				});
				/* uni.navigateTo({
					url: "../success/success"
				}) */
			}
		}
	}
</script>

<style>
	
	/* 商品列表*/
	
	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding-top:30rpx;
	}
	
	.tui-product-container {
		flex: 1;
		margin-right: 10rpx;
	}
	
	.tui-product-container:last-child {
		margin-right: 0;
	}
	
	.tui-pro-item {
		position: relative;
		border-bottom: 1px solid rgba(0,0,0,.1);
		padding-bottom: 30rpx;
		min-height:240rpx;
	
	}
	
	.tui-flex-list {
		display: flex;
		margin-bottom: 1rpx !important;
		border-bottom: 1rpx solid #ccc;
		padding-bottom: 20rpx;
	
	}
	
	.tui-pro-img {
		width: 260rpx;
		height:260rpx;
		display: block;
	}
	
	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		border-radius: 12rpx;
	}
	
	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
		position: absolute;
		left: 130px;
		top: 0;
	
	}
	
	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	.tui-pro-price {
		padding-top: 18rpx;
	}
	
	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}
	
	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		padding-left: 6rpx;
	}
	
	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}
	/* 商品列表*/
	.container {
		padding-bottom: 98rpx;
	}

	.tui-box {
		padding: 20rpx 0 118rpx;
		box-sizing: border-box;
	}

	.tui-address {
		min-height: 80rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
		position: relative;
	}

	.tui-userinfo {
		font-size: 30rpx;
		font-weight: 500;
		line-height: 30rpx;
		padding-bottom: 12rpx;
	}

	.tui-name {
		padding-right: 40rpx;
	}

	.tui-addr {
		font-size: 24rpx;
		word-break: break-all;
		padding-right: 25rpx;
	}

	.tui-addr-tag {
		padding: 5rpx 8rpx;
		flex-shrink: 0;
		background: #EB0909;
		color: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		line-height: 25rpx;
		transform: scale(0.8);
		transform-origin: 0 center;
		border-radius: 6rpx;
	}

	.tui-bg-img {
		position: absolute;
		width: 100%;
		height: 8rpx;
		left: 0;
		bottom: 0;
		background: url("") repeat;
	}

	.tui-top {
		margin-top: 20rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.tui-padding {
		box-sizing: border-box;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-flex {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
	}
	.tui-total-flex{
		justify-content: flex-end;
	}

	.tui-color-red,
	.tui-invoice-text {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-balance {
		font-size: 28rpx;
		font-weight: 500;
	}

	.tui-black {
		color: #222;
		line-height: 30rpx;
	}

	.tui-gray {
		color: #888888;
		font-weight: 400;
	}

	.tui-light-dark {
		color: #666;
	}

	.tui-goods-price {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
	}

	.tui-size-26 {
		font-size: 26rpx;
		line-height: 26rpx;
	}

	.tui-price-large {
		font-size: 34rpx;
		line-height: 32rpx;
		font-weight: 600;
	}

	.tui-flex-end {
		display: flex;
		align-items: flex-end;
		padding-right: 0;
	}

	.tui-phcolor {
		color: #B3B3B3;
		font-size: 26rpx;
	}

	/* #ifndef H5 */
	.tui-remark-box {
		padding: 22rpx 30rpx;
	}

	/* #endif */
	/* #ifdef H5 */
	.tui-remark-box {
		padding: 26rpx 30rpx;
	}

	/* #endif */

	.tui-remark {
		flex: 1;
		font-size: 26rpx;
		padding-left: 64rpx;
	}

	.tui-scale-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	.tui-scale-small .wx-switch-input {
		margin: 0 !important;
	}

	/* #ifdef H5 */
	>>>uni-switch .uni-switch-input {
		margin-right: 0 !important;
	}

	/* #endif */
	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 999;
	}

	.tui-pr-30 {
		padding-right: 30rpx;
	}

	.tui-pr-20 {
		padding-right: 20rpx;
	}

	.tui-none-addr {
		height: 80rpx;
		padding-left: 5rpx;
		display: flex;
		align-items: center;
	}

	.tui-addr-img {
		width: 36rpx;
		height: 46rpx;
		display: block;
		margin-right: 15rpx;
	}


	.tui-pr25 {
		padding-right: 25rpx;
	}

	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
